<template>
  <h1>{{ title }}</h1>
  <button @click="title = 'world'">change</button>
</template>

<script setup>
import { ref, watch } from "vue";
const title = ref("hello");
// watch监听局部的内容变更，生命周期里面的update是监听全局的变更
// 用watch监听title的变更，
watch(title, (newTitle, oldTitle) => {
  // 应用场景： 从而做一些副作用（DOM操作、axios请求、本地存储）
  console.log(newTitle, oldTitle);
});
</script>
